<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 表单 -->
    <van-cell-group inset>
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="submit"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>

    <van-form @submit="next">
      <div style="margin: 16px">
        <van-button
          round
          block
          disabled
          type="danger"
          native-type="submit"
          v-if="sms.length !== 5"
        >
          下一步
        </van-button>
        <van-button round block type="danger" native-type="submit" v-else>
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { dosendmsgcode } from "../../server/user";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../stores/counter";
import { storeToRefs } from "pinia";
const counterStore = useCounterStore();
const { username } = storeToRefs(counterStore);
const router = useRouter();
let sms = ref("");
//返回按钮
function onClickLeft() {
  router.go(-1);
}
// 验证码输入完成之后 跳转下一个页面
function next() {
  router.push("/password");
}
// 封装函数发送请求
function submit() {
  dosendmsgcode({ tel: username.value }).then((res: any) => {
    console.log(res);

    if (res.code === "200") {
      if (sms.value === res.data) next();
    }
  });
}
</script>

<style scoped>
.van-cell-group {
  margin-top: 6.25rem;
}
</style>
